<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>


			/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
			::-webkit-scrollbar{
				width: 5px;
				height: 5px;
				background-color: #F5F5F5;
			}

			/*定义滚动条轨道 内阴影+圆角*/
			::-webkit-scrollbar-track {
				box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
				border-radius: 10px;
				background-color: #F5F5F5;
			}

			/*定义滑块 内阴影+圆角*/
			::-webkit-scrollbar-thumb{
				border-radius: 10px;
				box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
				-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
				/*滚动条的颜色*/
				background-color: #00BFFF;
			}





			html,body{
				width: 100%;
				height: 100%;
			}
			*{
				padding: 0;
				margin: 0;
			}
			.preview_main_page{
				display: flex;
				width:100%;
				height:100%;
				flex-direction:column;
			}

            /*场景部分*/
			.preview_main_page_center{
				height:100%;
				flex-grow:1;
				display: flex;
			/*	justify-content:safe center;
				align-items: center;*/
				overflow:auto;
			}
		</style>
		<!--layui框架-->
		<link rel="stylesheet" href="js/plugIn/layui-master/src/css/layui.css">
		<script src="js/plugIn/jquery/jquery.min.js"></script><!--jquery 要在layui之前，这样layui就不会加载内部的jquery-->
		<script src="js/plugIn/layui-master/src/layui.js"></script>
		<script src="js/common/tool.js"></script>
	</head>
	<body>
		<div class="preview_main_page">
			<div class="preview_main_page_center">

				<form class="layui-form" action="" style="width: 100%;margin: 20px;" id="valueform"  lay-filter="valueform">

                    <div class="layui-form-item">
                    	<div class="layui-inline">
                    		<label class="layui-form-label" style="margin-right:4px;">图纸名称：</label>
                    		<div class="layui-input-inline">
								<input type="text" name="draw_name" id="drawName" required  lay-verify="required" placeholder="请输入图纸名称" autocomplete="off" class="layui-input" style="width:200px;"/>
                    			<!-- <input type="text" value="" id="drawName"  style="width:200px;height:30px;line-height:30px;padding-left:6px;" /> -->
                    			
                    		</div>
                    	</div>
                    </div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label" style="margin-right:4px;">图纸图标：</label>
							<div class="layui-input-inline">
								<input style = 'display: none;' type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" value="" name="fileObject" id="fileObject"  >
								<input type="button" id = 'selectFile' class="layui-btn layui-btn-primary" style="width:94px;" value="点击更换"/>
							</div>
						</div>
						<!-- <div class="layui-inline">
							<div class="layui-input-inline" style = 'width:70px'>
								<input type="button" style = 'display:none'   id="uploadButton" class="layui-btn layui-btn-danger" value="开始上传"/>
							</div>
						</div> -->
					</div>
					
					<!-- <div class="layui-form-item">
						<label class="layui-form-label">图片大小</label>
						<div class="layui-input-block">
							<span id="len" style = 'line-height: 38px'> K</span>
						</div>
					</div> -->
					<div class="layui-form-item">
						<label class="layui-form-label">图标预览：</label>
						<div class="layui-input-block">
							<img id="imgShow"   style="width:94px;height:90px;" alt=""/>
							<!-- <div id='image-progress' style = 'display:none' class="layui-progress" lay-showpercent="true" lay-filter="demo">
								<div class="layui-progress-bar" lay-percent="0%"></div>
							</div> -->

						</div>
					</div>
					<div class="layui-form-item">
					    <label class="layui-form-label">是否首页：</label>
					    <div class="layui-input-block">
					      <input type="checkbox" name="zzz" id="isIndex" lay-skin="switch"  lay-text="是|否">
					    </div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" style="margin-right:5px;"></label>
						<div class="layui-inline">
							<div class="layui-input-inline" style = 'width:70px'>
								<!-- <input type="button" style = 'display:none'   id="uploadButton" class="layui-btn layui-btn-normal" value="确认修改"/> -->
								<input type="button"   id="uploadButton" class="layui-btn layui-btn-normal" style="width:94px;" value="确认"/>
							</div>
						</div>
					</div>
					


				</form>

			</div>


			</div>
		</div>
	</body>
<script>
	//console.log(localStorage.getItem("infoDrawId"));
	//var baseURL = "http://yklink.net:36002/";
	var baseURL = localStorage.getItem("baseURL");
	//获取图纸原信息并显示
	var indexForm = parent.layer.getFrameIndex(window.name);
	var drawId = $_GET.draw_id;
	//console.log(drawId);
	var element;
	var upImg=null;
	$.ajax({
		type: "POST",
		traditional: true,
		url:baseURL+'api/draw/info',
		data:{
			id:drawId,
			token:localStorage.getItem("attoken")
		},
		cache: false,
		async:false, 
		beforeSend: function() {
		//请求前要处理的事情
		},
		success: function (data) {
			if(data && data.result=='success'){
				document.getElementById("imgShow").src=baseURL + data.data.draw_thumb;
				//$("#imgShow").setAttribute('src',"http://api.ykiot.net/" + data.data.draw_thumb);
				document.getElementById("drawName").value=data.data.draw_name;
				document.getElementById("isIndex").checked=data.data.is_index==1?true:false;
			}else{ 
			   alert(data.msg);
			   
			} 
			
			 
		},
		error: function (e) {
			   layer.msg('请求失败', {
				   offset: 't',
				   anim: 6,
				   icon:2
			   });
		}
	});
	
	
	layui.use(['form','upload','element'], function() {
		var form = layui.form;
		element = layui.element;

		$("#selectFile").click(function(event){
			event.stopPropagation();
			$('#fileObject').click();

		});
		var imgData="";
		$("#fileObject").change(function(e){
			var imgFile = new FileReader();
			upImg = fileObject.files[0];
			imgFile.readAsDataURL(fileObject.files[0]);
			imgFile.onload = function () {
				 imgData = this.result; //base64数据


				var fileSize = getImgByteSize(imgData).toFixed(2);
                if(fileSize>500){
					//$("#uploadButton").hide();
					//$("#image-progress").hide();
					imgShow.setAttribute('src', "");
					//$("#len").html(" K") ;
					layer.msg('文件大小超过500K，请修正后重传', {
						offset: 't',
						anim: 6,
						icon:2
					});
				}else{

					imgShow.setAttribute('src', imgData);
					//$("#len").html(fileSize+" K") ;
					//$("#uploadButton").show();
					//$("#image-progress").show();
					
				}
			}

			$(this).val("");
		});
		
		
		

    //触发上传事件
		$('#uploadButton').on('click', function(){
		    var upForm=new FormData();
			upForm.append("id",drawId);
			upForm.append("draw_name",document.getElementById("drawName").value.trim());
			upForm.append("draw_thumb", upImg);
			upForm.append("is_index", document.getElementById("isIndex").checked?1:0);
			upForm.append("token", localStorage.getItem('attoken'));
			$.ajax({
				type: "POST",
				traditional: true,
				processData:false,// 使用formData传参的配置
				contentType:false,
				async:false,
				url:baseURL+'api/draw/update',
				data:upForm,
				//data:{'iconBase64':iconBase64,'moduleJson':JSON.stringify(moduleJson),'userId':userId},
				// xhr : function() { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
				// 	myXhr = $.ajaxSettings.xhr();
				// 	if (myXhr.upload) { //检查upload属性是否存在
				// 		//绑定progress事件的回调函数
				// 		myXhr.upload.addEventListener(
				// 				'progress',
				// 				progressHandlingFunction,
				// 				false);
				// 	}
				// 	return myXhr; //xhr对象返回给jQuery使用
				// },
				//cache: false,
				// beforeSend: function() {
				// 	ot = new Date().getTime();   //设置上传开始时间
				// 	oloaded = 0;//设置上传开始时，以上传的文件大小为0
				// 	console.log("开始上传")
				// },
				success: function (data) {
					if(data && data.result=="success"){
						 layer.msg('设置成功', {
							 offset: '100px',
							 anim: 3,
							 icon:1,
						   
						 },  function(){
							 parent.layer.close(indexForm);
							//alert();
							}
						 );
						
					}else{
						layer.msg('修改失败'+data.msg, {
							 offset: '100px',
							 anim: 3,
							 icon:1,
						  
						},  function(){
							 parent.layer.close(indexForm);
							//alert();
							}
						);
					}
					
					console.log("上传成功")
				},
				error: function (e) {
					   layer.msg('图片上传失败，无法修改', {
		                   offset: '100px',
		                   anim: 6,
		                   icon:2
		               });
					console.log("上传失败")
				}
			});
		});
//



	});

	//点击确认按钮
	function okClick(){
        //得到需要取数据的id；
		var values = $("#valueStr").val();

		parent.stageView.writeValue = values;
		parent.layer.close(index);
	}
	// 获取base64图片大小
	function getImgByteSize(graphicContents) {
		if (graphicContents) { // 获取base64图片byte大小
			const equalIndex = graphicContents.indexOf('='); // 获取=号下标
			if (equalIndex > 0) {
				const str = graphicContents.substring(0, equalIndex); // 去除=号
				const strLength = str.length;
				const fileLength = strLength - (strLength / 8) * 2; // 真实的图片byte大小
				return Math.floor(fileLength)/1024; // 向下取整
			} else {
				const strLength = graphicContents.length;
				const fileLength = strLength - (strLength / 8) * 2;
				return  Math.floor(fileLength)/1024; // 向下取整
			}
		} else {
			return 0;
		}
	}
    //ajax 进度回调方法
	function progressHandlingFunction(evt) {
		var nt = new Date().getTime();//获取当前时间
		var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
		ot = new Date().getTime(); //重新赋值时间，用于下次计算
		var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
		oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
		//上传速度计算
		var speed = perload/pertime;//单位b/s
		var bspeed = speed;
		var units = 'b/s';//单位名称
		if(speed/1024>1){
			speed = speed/1024;
			units = 'k/s';
		}
		if(speed/1024>1){
			speed = speed/1024;
			units = 'M/s';
		}
		speed = speed.toFixed(1);
		//剩余时间
		var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
		var percent = evt.loaded / evt.total * 100;
		console.log('当前速度：'+speed+units+'，剩余时间：'+resttime+'s,当前进度：'+percent.toFixed(2)+"%");
		element.progress('demo', percent.toFixed(2)+'%');
	}

</script>
</html>
